<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="lhz" uri="http://www.liuhuazhi.com/diancan" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>安排餐桌/排队</title>
<link rel="stylesheet" href="${ctx}/css/input.css" />
<link rel="stylesheet" href="${ctx}/css/ArrangeTable/ArrangeTable.css" />
</head>
<body>
	<h4  align="center">预约</h4><hr>
	
	 <div id='container'>
	 	<div class='message' style="background: url('../image/body_bj.jpg');height: 50px;min-width: 800px">
	 		<input type="image" src="${ctx}/image/suoyou.png" title="查看所有预约记录" class="check_all">
	  		<label style="margin-top: 0px;margin-bottom:0px;border: 1px solid #7ab893;border-radius: 4px;">
				<input type='text' id="number" style="color: black;border: 2px solid #ffffff;">
		      	<span>预约号</span>
		    </label>
		    <label style="margin-top: 0px;margin-bottom:0px;border: 1px solid #7ab893;border-radius: 4px;">
		      <input type='text' id="phone" style="color: black;border: 2px solid #ffffff;">
		      <span>手机号</span>
		    </label>
		    <div class="box" style="display: inline-block;position:relative">
				<div class="hello3">
					<input class="inline laydate-icon" id="hello3" placeholder="日期(可不选)" readonly="readonly" style="height: 30px;border: 1px solid #7ab893;border-radius: 4px;;background: url('../image/body_bj.jpg');"> 
				</div>
			</div>
			<input type="button" class="search" value="搜索"> 
		</div>
	</div>
	<span style="clear:both;width: 1px;height:1px;display:block;"></span>
	<hr>
	<table  width="95%"  height="auto"  cellspacing="0" cellpadding="0" border="1px" style="min-width:800px">
		<colgroup>
			<col width="10%">
			<col width="15%">
			<col width="25%">
			<col width="20%">
			<col width="5%">
			<col width="15%">
		</colgroup>
		<tr align="center" class="tr1">
			<td>预约号</td>
			<td>日期</td>
			<td>到达时间段</td>
			<td>手机</td><!-- tableName -->
			<td>人数</td>
			<td>餐桌名</td>
			<td>状态</td>
			<td>操作</td>
		</tr>
		<c:if test="${!empty map.list }">
		<input type="hidden" id="total" value="${map.total}">
			<c:forEach var="x" items="${map.list}">
				<tr class="tr2" >
					<td class="td1">
						${x.number }
						<input type="hidden" class="apt_id" value="${x.aptId }" >
					</td>
				<td class="date">
 						 <%-- <c:out value="${fn:substring(x.startTime,0,10) }"/> --%>
 						 <fmt:formatDate value="${x.startTime}" pattern="yyyy-MM-dd"/>
					</td>
					<td>
						<c:out value="${fn:substring(x.startTime,11,19) }"/>
									<span>——</span>
						<c:out value="${fn:substring(x.endTime,11,19) }"/>
					</td>
					<td>${x.user.phone }</td>
					<td>${x.renshu}</td>
					<td>
					<c:if test="${!empty x.tableName}">
					<span style="color: red">${x.tableName}</span>
					</c:if>
					<c:if test="${empty x.tableName}">
					<span style="color: red">暂无</span>
					</c:if>
					</td>
					<td>
						<c:choose>
							<c:when test="${x.status==0}">未到达</c:when>
							<c:when test="${x.status==1}">已到达</c:when>
							<c:when test="${x.status==2}">已安排餐桌</c:when>
							<c:otherwise>已取消</c:otherwise>
						</c:choose>
					</td>
					<td>
						<input class="daoda" type="image" src="../image/daoda.png" title="客户已到达" status="${x.status }"/>
					</td>
				</tr>
			</c:forEach>
	</table>
	<input type="hidden" value="${map.message}" >
	<jsp:include  page="pagination.jsp" flush="true|false"/>
	</c:if>
<script type="text/javascript" src="${ctx}/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="${ctx}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/ArrangeTable/ArrangeTable.js"></script>
<script type="text/javascript" src="${ctx}/js/calendar/laydate.js"></script>
<script type="text/javascript">
	//日期范围限定在今天到后天
	laydate({
	    elem: '#hello3',
	    min: laydate.now(), //-1代表昨天，-2代表前天，以此类推
	    max: laydate.now(+3) //+1代表明天，+2代表后天，以此类推
	});
	
	
	!function(){
		laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
		laydate({elem: '#demo'});//绑定元素
	}();
	</script>
	
</body>
</html>